<template>
  <div>
    <SearchForm @search="getTableData" @reset="resetSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[1584]">
        <el-form-item :label="$t('所属租户')">
          <el-select style="width: 100%" v-model="page.tenantId" @change="tenantChange">
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1585]">
        <el-form-item :label="$t('APP名称')">
          <el-select style="width: 100%" v-model="page.productName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1596]">
        <el-form-item :label="$t('客群名称')">
          <el-select style="width: 100%" v-model="page.guestGroupId" @change="guestGroupChange">
            <el-option v-for="item in guestGroupList" :key="item.guestGroupId"
                       :label="item.guestGroupName"
                       :value="item.guestGroupId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1586]">
        <el-form-item :label="$t('经理名称')">
          <el-select style="width: 100%"
                     v-model="page.managerId" clearable filterable @change="managerChange">
            <el-option v-for="item in managerList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1587]">
        <el-form-item :label="$t('催收员')">
          <el-select style="width: 100%" v-model="page.adminUserId" clearable filterable>
            <el-option v-for="item in collectionUser" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户状态')">
          <el-select style="width: 100%" v-model="page.newOldNum" clearable>
            <el-option :label="$t('初借')" :value="0"></el-option>
            <el-option :label="$t('复借')" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('客户端')">
          <el-select style="width: 100%" v-model="page.clientType" clearable>
            <el-option :label="$t('pc端')" :value="0"></el-option>
            <el-option :label="$t('移动端')" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('日期')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              unlink-panels
              range-separator="~"
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <Table :table-column="tableColumn" :table-data="tableData"
             :loading="loading"
             :page="page" @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange"/>
    </el-card>
  </div>
</template>

<script>
import {fetchCollectionReportList, guestGroupBindList, guestGroupList} from '@/api/postLoan'
import {selectProduct, selectTenant} from "@/api/system";
import {dateFormatSection, defaultTimeDate} from "@/utils/tools";

export default {
  name: "loanReportCollectionRecord",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(7)
      },
      guestGroupList: [],
      tenantList: [],
      productList: [],
      managerList: [],
      collectionUser: [],
      tableData: [],
      loading: false,
      tableColumn: [
        {label: this.$t('日期'), prop: 'dateStr', align: 'center', minWidth: 100, fixed: 'left'},
        {label: this.$t('客群名称'), prop: 'guestGroupName', align: 'center', minWidth: 100},
        {label: this.$t('催收员'), prop: 'adminUserName', align: 'center', minWidth: 100},
        {label: this.$t('总订单数'), prop: 'totalOrderNum', align: 'center', minWidth: 100},
        {label: this.$t('本人电话数'), prop: 'myPhoneNum', align: 'center',},
        {label: this.$t('平均本人电话数'), prop: 'myPhoneNumAverage', align: 'center',},
        {label: this.$t('紧急联系人电话数'), prop: 'contactNum', align: 'center',},
        {label: this.$t('平均紧急联系人电话数'), prop: 'contactNumAverage', align: 'center',},
        {label: this.$t('通讯录电话数'), prop: 'addressBookNum', align: 'center',},
        {label: this.$t('平均通讯录电话数'), prop: 'addressBookNumAverage', align: 'center',},
        {label: this.$t('手机通话记录电话数'), prop: 'phoneAddressBookNum', align: 'center',},
        {label: this.$t('平均手机通话记录电话数'), prop: 'phoneAddressBookNumAverage', align: 'center',},
        {label: this.$t('运营商电话数'), prop: 'operatorNum', align: 'center',},
        {label: this.$t('平均运营商电话数'), prop: 'operatorNumAverage', align: 'center',},
        {label: this.$t('运营商TOP50电话数'), prop: 'operator50Num', align: 'center',},
        {label: this.$t('平均运营商TOP50电话数'), prop: 'operator50NumAverage', align: 'center',},
        {label: this.$t('本地TOP50电话数'), prop: 'local50Num', align: 'center',},
        {label: this.$t('平均本地TOP50电话数'), prop: 'local50NumAverage', align: 'center',},
        {label: `本人${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'myZaloNum', align: 'center',},
        {label: `平均本人${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'myZaloNumAverage', align: 'center',},
        {label: `紧急联系人${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'contactZaloNum', align: 'center',},
        {label: `平均紧急联系人${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'contactZaloNumAverage', align: 'center',},
        {label: `通讯录${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'addressBookZaloNum', align: 'center',},
        {label: `平均通讯录${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'addressBookZaloNumAverage', align: 'center',},
        {label: `手机通话记录${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'phoneAddressBookZaloNum', align: 'center',},
        {
          label: `平均手机通话记录${this.isMoxige ? 'whatsApp' : 'zalo'}数`,
          prop: 'phoneAddressBookZaloNumAverage',
          align: 'center',
        },
        {label: `运营商${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'operatorZaloNum', align: 'center',},
        {label: `平均运营商${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'operatorZaloNumAverage', align: 'center',},
        {label: `运营商TOP50${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'operator50ZaloNum', align: 'center',},
        {
          label: `平均运营商TOP50${this.isMoxige ? 'whatsApp' : 'zalo'}数`,
          prop: 'operator50ZaloNumAverage',
          align: 'center',
        },
        {label: `本地TOP50${this.isMoxige ? 'whatsApp' : 'zalo'}数`, prop: 'localOperator50Num', align: 'center',},
        {
          label: `平均本地TOP50${this.isMoxige ? 'whatsApp' : 'zalo'}数`,
          prop: 'localOperator50NumAverage',
          align: 'center',
        },
        {label: this.$t('本人短信数'), prop: 'myMessageNum', align: 'center',},
        {label: this.$t('平均本人短信数'), prop: 'myMessageNumAverage', align: 'center',},
      ]
    }
  },
  computed: {
    isMoxige() {
      return process.env.VUE_APP_REGION === 'moxige'
    }
  },
  async mounted() {
    const p2 = await selectTenant().then(res => {
      this.tenantList = res.data
      if (this.tenantList.length > 0) this.$set(this.page, 'tenantId', this.tenantList[0].adminUserId)
    })
    // 获取客群名称
    const p1 = await guestGroupList({
      pageNum: 1,
      pageSize: 1000,
      type: 1,
      tenantId: this.page.tenantId
    }).then(res => {
      const {list} = res.data
      this.guestGroupList = list || []
      if (this.guestGroupList.length > 0) this.$set(this.page, 'guestGroupId', this.guestGroupList[0].guestGroupId)
    })
    selectProduct().then(res => {
      this.productList = res.data
    })
    //  催收员
    guestGroupBindList({
      pageSize: 100,
      adminRole: 7,
    }).then(res => {
      this.collectionUser = res.data.list
    })
    // 经理姓名
    guestGroupBindList({
      adminRole: 6,
    }).then(res => {
      this.managerList = res.data.list
    })
    Promise.all([p1, p2]).then(res => {
      this.getTableData()
    })
    this.getTableData()
  },
  methods: {
    async getTableData() {
      this.loading = true
      const [startTime, endTime] = dateFormatSection(this.page.timeValue)
      const params = {
        ...this.page,
        startTime, endTime
      }
      delete params.timeValue
      const res = await fetchCollectionReportList(params)
      if (res.code === 1) {
        const {list, total, average} = res.data
        this.tableData = list.list
        if (this.tableData && this.tableData.length) {
          this.tableData.unshift({...average, dateStr: this.$t('平均数'), totalOrderNum: average.totalOrderNumAverage})
          this.tableData.unshift({...total, dateStr: this.$t('合计')})
        }
        this.page.total = list.total
        this.loading = false
      } else {
        this.loading = false
      }
    },
    resetSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    },
    tenantChange(value) {
      guestGroupList({
        pageNum: 1,
        pageSize: 1000,
        type: 1,
        tenantId: value
      }).then(res => {
        const {list} = res.data
        this.$set(this.page, 'guestGroupId', null)
        this.guestGroupList = list || []
      })
      selectProduct({adminUserId: value}).then(res => {
        this.productList = res.data
        this.$set(this.page, 'productName', null)
      })
    },
    guestGroupChange(value) {
      // 经理姓名
      guestGroupBindList({
        adminRole: 6,
        pageSize: 100,
        guestGroupId: value
      }).then(res => {
        if (res.code === 1) {
          this.$set(this.page, 'managerId', null)
          this.managerList = res.data.list
        }
      })
    },
    managerChange(value) {
      //  催收员
      guestGroupBindList({
        pageSize: 100,
        adminRole: 7,
        managerId: value
      }).then(res => {
        this.$set(this.page, 'adminUserId', null)
        this.collectionUser = res.data.list
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
  }
}
</script>

<style scoped>

</style>
